<template>
  <!--     事件处置   -->
  <div class="rule-box">
    <div v-if="$route.query.formName || $route.query.name|| $route.query.ip" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="preset-log">
      <div style="height: 100%">
        <div class="container-box">
          <div class="page-container">
            <!-- 左侧 -->
            <CommonFilter ref="commonFilterRef" :tree="treeData" @emitSel="getSel" @handleReset="handleResetFilter" />
            <div class="right-container log-right">
              <div class="container-search">
                <el-form
                  ref="formRef"
                  :inline="true"
                  :model="formInline"
                  class="demo-form-inline"
                  style="position: relative"
                >
                  <el-row class="container-search-row">
                    <el-col class="search-col-flex" :span="24">
                      <el-form-item label="关键字" prop="keyword">
                        <el-input
                          v-model="formInline.keyword"
                          size="small"
                          style="width: 200px"
                          placeholder="请输入事件名称/IP"
                          maxlength="50"
                          clearable
                          @keyup.enter.native="handleClcikSearch"
                          @clear="handleClcikSearch"
                        />
                      </el-form-item>
                      <el-form-item class="el-form-item-radius" label="发现时间" prop="time">
                        <el-radio-group
                          v-model="formInline.shortcut"
                          class="el-radio-radius"
                          size="small"
                          @change="handleTimeRange($event)"
                        >
                          <el-radio-button label="day">近一日</el-radio-button>
                          <el-radio-button label="week">近一周</el-radio-button>
                          <el-radio-button class="el-radio-button-radius" label="month">近一月</el-radio-button>
                        </el-radio-group>
                        <el-date-picker
                          ref="dataPickerRef"
                          v-model="formInline.time"
                          style="width: 360px"
                          size="small"
                          class="data-picker-radius"
                          type="datetimerange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          :default-time="['00:00:00', '00:00:00']"
                          :picker-options="setDisabled"
                          @change="handleChangeDatePicker"
                        />
                      </el-form-item>
                      <el-form-item>
                        <el-button size="small" type="primary" @click="handleClcikSearch">查询</el-button>
                        <el-button size="small" @click="handleReset('formRef')">重置</el-button>
                        <!-- <el-button size="small" @click="handleAlarm">告警核实</el-button> -->
                        <el-button size="small" @click="handleExport">导出</el-button>
                      </el-form-item>
                      <!-- <el-form-item label="处置权限" prop="keyword">
                        <el-select v-model="formInline.power" size="small" placeholder="请选择">
                          <el-option
                            v-for="item in powerOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item> -->
                    </el-col>
                    <!-- <el-col :span="6" class="button-group">
                      <el-col :span="12">
                        <el-button size="small" type="primary" @click="handleClcikSearch">查询</el-button>
                        <el-button size="small" @click="handleReset('formRef')">重置</el-button>
                      </el-col>
                      <el-col :span="12">
                        <el-button size="small" @click="handleAlarm">告警核实</el-button>
                        <el-button size="small" @click="handleExport">导出</el-button>
                      </el-col>
                    </el-col> -->
                  </el-row>
                  <!-- <el-row>
                    <el-button size="small" type="primary" @click="handleClcikSearch">查询</el-button>
                    <el-button size="small" @click="handleReset('formRef')">重置</el-button>
                    <el-button size="small" @click="handleExport">导出</el-button>
                  </el-row> -->
                </el-form>
              </div>

              <div class="tabs">
                <span
                  v-for="(item, index) in tabsObj"
                  :key="index"
                  :class="{ tab_active: index == activeIndex }"
                  @click="handleChangeTab(item.statusValue, index)"
                >{{ item.statusName }}({{ item.count }})</span>
              </div>

              <div class="tab-content">
                <div class="tab-header">
                  <div class="left-btn">
                    <template v-if="activeIndex == 0">
                      <!--                    <el-button type="text" @click="handleSign">批量标记误报</el-button>-->
                      <!--                    <el-button type="text" @click="handleDeal">批量处置</el-button>-->
                    </template>
                  </div>
                  <div class="right-btn">
                    <span @click="handleTimeSort">时间排序 <i class="el-icon-time" /></span>
                    <span @click="handleEventLevelSort">事件级别排序<i class="el-icon-sort" /></span>
                  </div>
                </div>
                <HkTable
                  :table-data="tableData"
                  :table-columns="tableLabelLists"
                  :is-need-index="true"
                  :selection="true"
                  :total="total"
                  :table-height="80"
                  :show-tooltip="false"
                  :query-params="queryParams"
                  @handleSelectionChange="handleSelectionChange"
                  @changePage="changePage"
                >
                  <template #list="scope">
                    <div class="tablelist" @click="handleDetail(scope.row.row)">
                      <p class="tablelist-title">{{ scope.row.row.eventName }}</p>
                      <el-row>
                        <el-col
                          class="hk-flex"
                          :span="6"
                        ><span>事件类型：</span><span>{{ scope.row.row.eventCategory }}</span></el-col>
                        <el-col
                          class="hk-flex"
                          :span="6"
                        ><span>事件级别：</span>
                          <el-tag
                            :type=" scope.row.row.eventLevel == '特别重大'
                              ? 'danger'
                              : scope.row.row.eventLevel == '重大'
                                ? 'warning'
                                : scope.row.row.eventLevel == '较大'
                                  ? ''
                                  : 'success'"
                          >{{ scope.row.row.eventLevel }}</el-tag>
                        </el-col>
                        <el-col v-if="activeIndex == 1" class="hk-flex" :span="6">
                          处置时限：
                          <span style="display: flex; align-items: center">
                            <img
                              style="width: 20px; margin-right: 10px"
                              :src="
                                scope.row.row.overTime == '未超期'
                                  ? require(`@/assets/images/zhuangtai2.png`)
                                  : scope.row.row.overTime == '已超期'
                                    ? require(`@/assets/images/zhuangtai0.png`)
                                    : require(`@/assets/images/zhuangtai1.png`)
                              "
                            >
                            {{ scope.row.row.overTime }}
                          </span>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col class="hk-flex" :span="6"><span>首发时间：</span>{{ parseTime(scope.row.row.firstTime) }}</el-col>
                        <el-col class="hk-flex" :span="6"><span>末发时间：</span>{{ parseTime(scope.row.row.lastTime) }}</el-col>
                      </el-row>
                      <el-row>
                        <el-col class="hk-flex" :span="6">
                          <span style="">关联资产：</span>
                          <span class="text-ellipsis" style="margin: 0 5px">
                            {{ scope.row.row.relationAsset }}
                          </span>
                        </el-col>
                        <el-col class="hk-flex" :span="6">
                          <span style="">关联人员：</span>
                          <span class="text-ellipsis" style="margin: 0 5px">
                            {{ scope.row.row.relationPerson }}
                          </span>
                        </el-col>
                        <el-col class="hk-flex" :span="6">
                          <span style="">关联应用：</span>
                          <span class="text-ellipsis" style="margin: 0 5px">
                            {{ scope.row.row.relationApp }}
                          </span>
                        </el-col>
                        <el-col class="hk-flex" :span="6">
                          <span style="">发生次数：</span>
                          <span class="text-ellipsis" style="margin: 0 5px">
                            {{ scope.row.row.count }}
                          </span>
                        </el-col>
                      </el-row>
                      <!-- <el-row v-if="activeIndex != 2" style="margin: 10px 0">
                        <el-button
                          v-if="activeIndex == 0"
                          type="primary"
                          plain
                          @click.stop="handleLaunchWorkOrder(scope.row.row)"
                          >处 置
                        </el-button>
                        <el-button v-if="activeIndex == 0" type="danger" plain @click.stop="handleClose(scope.row.row)"
                          >关 闭</el-button
                        >
                        <el-button plain @click.stop="handleEmergencyPlanDetail(scope.row.row)"
                          >应急响应预案
                        </el-button>
                        <el-button plain @click.stop="handleSign(scope.row.row)">标记误报</el-button>
                      </el-row> -->
                    </div>
                  </template>
                </HkTable>
              </div>
            </div>
          </div>
        </div>
      </div>
      <HanldleLaunchWorkOrder ref="handleLaunchWorkOrderRef" @handleSubmit="handleLaunchSubmit" />
      <HandleDialog ref="handleDialogRef" @handleSubmit="handleHandling" />
      <KonwledgeAdd ref="k_dia" :form="formData" :title="title" @handleSave="getList" />
    </div>
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table'
import CommonFilter from '../components/CommonFilter'
import KonwledgeAdd from '../components/KonwledgeAdd'
import HandleDialog from './components/HanldleDialog'
import HanldleLaunchWorkOrder from './components/HanldleLaunchWorkOrder'
import {
  getTree,
  getTotal,
  disposal,
  handleFalse,
  preplan,
  aggrIncidentList
} from '@/api/dispose/incidentHandling'
import { parseTime } from '@/utils/hongke.js'

export default {
  name: 'IncidentHandle',
  components: { HkTable, CommonFilter, HandleDialog, KonwledgeAdd, HanldleLaunchWorkOrder },
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  },
  data() {
    return {
      tabsObj: [],
      activeIndex: 0,
      formInline: {
        keyword: '',
        region: '',
        time: ''
      },
      powerOptions: [],
      showHighSearch: false,
      // 树形组件
      treeData: [],
      defaultEventLevel: {},
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      loading: false,
      tableData: [],
      total: 0,
      queryParams: {
        current: 1,
        size: 10,
        timeSort: 0,
        eventLevelSort: undefined,
        disposalStatus: 0,
        ip: this.$route.query.ip
      },
      tableLabelLists: [{ label: '', param: 'list', type: 'slot' }],
      detailData: {},
      checkList: [],
      currentGid: '',
      tableCheckList: [],
      searchQuery: {},
      startTime: undefined,
      endTime: undefined,
      title: '',
      formData: {}
    }
  },
  watch: {
    '$route'() {
      this.handleClcikSearch()
    }
  },
  activated() {
    this.handleClcikSearch()
  },
  created() {
    this.gteInitData()
  },
  methods: {
    //  初始获取数据
    gteInitData() {
      if (this.$route.query?.filter) {
        this.getList({ ...this.queryParams, filters: [JSON.parse(this.$route.query?.filter)] })
      } else if (this.$route.query?.ip) {
        this.getList({ ...this.queryParams, ip: this.$route.query?.ip })
      } else {
        this.getList(this.queryParams)
      }

      if (this.$route.query?.ip) {
        this.getTotalData({ ip: this.$route.query?.ip })
        this.getLeftTree({ ip: this.$route.query?.ip })
      } else {
        this.getLeftTree({})
        this.getTotalData({})
      }
    },
    //  日期选择器只可选择当前之后的
    setDisabled(time) {
      // 返回禁用时间
      return time.getTime() < Date.now() - 8.64e7 // 不可选历史天、可选当前天、可选未来天
      // return time.getTime() < Date.now(); // 不可选历史天、不可选当前天、可选未来天
      // }
    },
    /** 查询按钮  */
    handleClcikSearch() {
      this.queryParams.current = 1
      this.handleSeach()
      this.getLeftTree({ keyword: this.formInline.keyword, startTime: this.startTime, endTime: this.endTime })
      this.getTotalData({ keyword: this.formInline.keyword, startTime: this.startTime, endTime: this.endTime, filters: this.checkList })
    },
    handleSeach(type) {
      if (this.formInline?.time && this.formInline?.time != null) {
        this.startTime = new Date(this.formInline?.time[0]).getTime()
        this.endTime = new Date(this.formInline?.time[1]).getTime()
      }
      this.searchQuery = Object.assign({}, this.queryParams, this.formInline, {
        startTime: this.startTime,
        endTime: this.endTime,
        filters: type == 'reset' ? [] : this.checkList
      })
      this.getList(this.searchQuery)
      // this.getLeftTree();
    },
    /** 重置  */
    handleReset(formName) {
      this[formName] = {}
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
        this.formInline = {
          keyword: '',
          region: '',
          time: ''
        }
        this.startTime = null
        this.endTime = null
        this.checkList = []
        this.getLeftTree({ keyword: this.formInline.keyword, startTime: null, endTime: null })
        this.$refs.commonFilterRef.checkList = []
        this.$refs.commonFilterRef.checkKeys = []
        this.getTotalData({ keyword: this.formInline.keyword, startTime: null, endTime: null })
        this.handleSeach('reset')
      })
    },
    /** 获取列表数据 */
    getList(query) {
      this.loading = true
      aggrIncidentList(query).then((res) => {
        this.loading = false
        this.tableData = res.list
        this.total = res.total
      })
    },
    /** 获取事件状态统计 */
    getTotalData(query) {
      query.ip = this.$route.query.ip
      getTotal(query).then((res) => {
        this.tabsObj = res
        /*  let result = res
        this.tabsObj = result.filter(i => {
          return i.statusValue != '2'
        })*/
      })
    },
    /** 三种时间区间选择*/
    handleTimeRange(value) {
      const end = new Date()
      const start = new Date()
      let nstart = null
      let nend = null
      switch (value) {
        case 'day':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
          nstart = this.setStartTime(start.getTime())
          nend = this.setEndTime(start.getTime())
          this.formInline.time = [parseTime(nstart), parseTime(nend)]
          break
        case 'week':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
          nstart = this.setStartTime(start.getTime())
          nend = this.setEndTime(end.getTime())
          this.formInline.time = [parseTime(nstart), parseTime(nend)]
          break
        case 'month':
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          end.setTime(end.getTime() - 3600 * 1000 * 24 * 1)
          nstart = this.setStartTime(start.getTime())
          nend = this.setEndTime(end.getTime())
          this.formInline.time = [parseTime(nstart), parseTime(nend)]
          break
        default:
          break
      }
    },
    // time为某一天的时间戳
    setStartTime(time) {
      const nowTimeDate = new Date(time)
      return nowTimeDate.setHours(0, 0, 0, 0)
    },
    setEndTime(time) {
      const nowTimeDate = new Date(time)
      return nowTimeDate.setHours(23, 59, 59, 999)
    },
    /** 时间转化 */
    timestampToTime(timestamp) {
      const date = new Date(timestamp) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      const s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      return Y + M + D + h + m + s
    },
    /** 时间选择器触发事件*/
    handleChangeDatePicker(value) {
      this.startTime = null
      this.endTime = null
      this.formInline.shortcut = ''
    },
    /** tabs页切换*/
    handleTabsClick(tab, event) {
      this.queryParams = { current: 1, size: 10 }
      this.handleSeach()
    },
    /** 详情 */
    handleDetail(row) {
      const sTime = this.formInline.time && new Date(this.formInline.time[0]).getTime()
      const eTime = this.formInline.time && new Date(this.formInline.time[1]).getTime()
      const isDiopose = this.activeIndex != 0
      if (row.eventId) {
        this.$router.push({ path: window.prefix + '/dispose/incidentHandle/detail', query: { showBack: true, ids: row.eventId, isDiopose }})
      } else if (this.activeIndex == 1) {
        this.$router.push({ path: window.prefix + '/dispose/incidentHandle/detail', query: { showBack: true, type: 'batchId', ids: row.batchId, isDiopose }})
      } else {
        this.$router.push({
          path: window.prefix + '/dispose/incidentList',
          query: { showBack: true, eventCode: row.eventCode, disposalStatus: this.queryParams.disposalStatus, ip: row.ip, startTime: sTime, endTime: eTime, batchId: row.batchId }
        })
      }
    },
    /** 获取左侧树的数据 */
    getLeftTree(query, type) {
      query.ip = this.$route.query.ip
      getTree(query).then((res) => {
        this.treeData = res
        if (this.treeData.length > 0) {
          this.treeData.forEach((i, index) => {
            i.children.forEach((ii, indx) => {
              ii.source = i.normalGroupCode
            })
          })
        }
      })
    },
    /** 左侧树点击事件 */
    getSel(data, checkData) {
      this.checkList = []
      data.forEach((i) => {
        if (i.sourceValues.length > 0) {
          this.checkList.push(i)
        }
      })
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.handleSeach()
      this.getTotalData({ keyword: this.formInline.keyword, startTime: this.startTime, endTime: this.endTime, filters: this.checkList })
      this.getLeftTree(
        {
          keyword: this.formInline.keyword,
          startTime: this.startTime,
          endTime: this.endTime,
          filters: this.checkList
        },
        'checkData'
      )
      this.$refs.commonFilterRef.setChecked(checkData)
    },
    //  点击重置按钮
    handleResetFilter() {
      this.checkList = []
      this.handleSeach()
      this.getLeftTree({
        keyword: this.formInline.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
        filters: this.checkList
      })
    },
    /** 切换处置tabs */
    handleChangeTab(value, index) {
      this.queryParams.disposalStatus = value
      this.queryParams.current = 1
      this.activeIndex = index
      this.handleSeach()
    },
    /**  处置按钮 */
    handleDeal(row) {
      disposal({ ids: [row.id], disposalStatus: 2 }).then((res) => {
        this.$message.success('操作成功！')
        this.handleHandling()
      })
    },
    /** 发起工单 */
    handleLaunchWorkOrder(row) {
      if (window.loginType === 'UM') {
        this.$refs.handleLaunchWorkOrderRef.show(row)
      } else {
        disposal({ ids: [row.id], disposalStatus: 2 }).then((res) => {
          this.$message.success('操作成功！')
          this.handleHandling()
        })
      }
    },
    /**  应急响应预案按钮  */
    handleEmergencyPlanDetail(row) {
      preplan({ kpiCode: row.metrics_code }).then((res) => {
        if (res) {
          this.formData = res
          this.title = '查看详情'
          this.$refs.k_dia.open = true
        } else {
          this.$modal.msgSuccess('该事件暂无应急响应预案!')
        }
      })
    },
    /** 关闭按钮 */
    handleClose(row) {
      let ids = []
      if (row.id) {
        ids = [row.id]
      } else {
        ids = this.tableCheckList.map((i) => {
          return i.id
        })
      }
      this.$refs.handleDialogRef.show(ids)
    },
    /** 标记误报*/
    handleSign(row) {
      let ids = []
      if (row.id) {
        ids = [row.id]
      } else {
        ids = this.tableCheckList.map((item) => {
          return item.id
        })
      }

      this.$modal
        .confirm('是否确认标记误报？')
        .then(function() {
          return handleFalse({ ids: ids })
        })
        .then((res) => {
          const _self = this
          this.$modal.msgSuccess(res)
          setTimeout(function() {
            _self.getTotalData({})
            _self.handleSeach()
          }, 500)
        })
        .catch(() => {})
    },
    /** 按时间排序 */
    handleTimeSort() {
      this.queryParams.eventLevelSort = undefined
      if (this.queryParams.timeSort === 0) {
        this.queryParams.timeSort = 1
      } else {
        this.queryParams.timeSort = 0
      }
      this.handleSeach()
    },
    /** 按事件级别排序 */
    handleEventLevelSort() {
      this.queryParams.timeSort = undefined
      if (this.queryParams.eventLevelSort === 0) {
        this.queryParams.eventLevelSort = 1
      } else {
        this.queryParams.eventLevelSort = 0
      }
      this.handleSeach()
    },
    /** 列表复选框 */
    handleSelectionChange(data) {
      this.tableCheckList = data
    },
    changePage(data) {
      this.queryParams.current = data.current
      this.queryParams.size = data.size
      this.handleSeach()
    },
    /** 告警核实   */
    handleAlarm() {},
    /**  导出  **/
    handleExport() {
      this.handleSeach()
      this.download(
        window.baseUrl.dispose + '/aggrIncident/export',
        this.searchQuery,
        `事件列表_${new Date().getTime()}.xls`,
        'object'
      )
    },
    /**  处置后刷新 */
    handleHandling() {
      setTimeout(() => {
        this.getTotalData({})
        this.handleSeach()
      }, 500)
    },
    /** 发起工单提交后刷新  */
    handleLaunchSubmit() {
      setTimeout(() => {
        this.getTotalData({})
        this.handleSeach()
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .targetTable .el-table{
  overflow: initial !important;
}
::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px !important;
}

.el-form-item-radius {
  ::v-deep .el-form-item__content {
    display: flex !important;
    align-items: flex-start !important;
  }
}

.demo-form-inline {
  flex-wrap: wrap;

  .container-search-row {
    display: flex;

    // .search-col-flex {
      // justify-content: ;
    // }

    .search-form-item {
      width: 15%;
      margin-right: 10px;
    }

    &.high-search-row {
      padding: 10px;
      background: #f3f5fc;
      border-top: 1px solid #4b6eef;
      position: relative;

      &::before {
        display: inline-block;
        content: '';
        position: absolute;
        width: 10px;
        border-bottom: 6px solid #4b6eef;
        border-top: 6px solid transparent;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        top: -13px;
        left: 5%;
      }
    }

    width: 100%;

    .el-col {
      display: flex;
      align-items: flex-end;
      margin-bottom: 10px;
    }

    .button-group {
      flex: 1;
      .el-col {
        margin: 0;
      }
      .el-col:nth-of-type(1) {
        justify-content: flex-start;
      }
      .el-col:nth-of-type(2) {
        order: 1;
        margin-left: auto;
      }
    }

    .data-picker-radius {
      border-left: 0 !important;
      border-radius: 0 4px 4px 0 !important;
    }
  }
}

.preset-log {
flex: 1;
overflow: auto;
  background: #eef0f5;
  padding: 0px;

  .page-container {
    background: #fff;
    overflow: auto;

    .left-container {
      overflow: auto;
    }

    .right-container {
      // overflow: auto;
      height:100%;

      .targetTable {
        height:100%;
        flex: 1;
        padding-bottom: 0;
        overflow: hidden;
      }
    }
  }

  .el-form {
    display: flex;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .container-box {
    height: 100%;

    .container-search {
      padding: 0 15px 5px;
      background: #fff;
    }
  }

  .left-container {
    height: 100%;
    border-top: 0px !important;
  }

  // 跳转的部分
  .m-container {
    width: 100%;
    height: 100%;
    background: #e5ecf6;
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-size: 14px;
    // 头部
    .m-header {
      background: #fff;
      box-shadow: 0 0 40px 0 rgb(0 0 0 / 8%);
      border-radius: 4px;
      margin-bottom: 10px;
    }

    // 线
    .header-line {
      width: 100%;
      height: 38px;
      line-height: 38px;
      padding: 0 8px;
      border-bottom: 1px solid #e8e8e8;
      cursor: pointer;
    }

    .filter-source {
      padding: 10px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .drawmain {
      padding: 0 16px 10px 16px;

      .addSearchParam-container {
        max-height: 265px;
        height: 100%;
        overflow: auto;

        .one-level-search-content {
          position: relative;
          padding-left: 40px;
          padding-bottom: 4px;

          .change-one-level-btn {
            position: absolute;
            left: 0;
            top: calc(50% - 6px);
            z-index: 3;
            padding: 0;
            width: 24px;
            height: 24px;
            color: #2979ff;
            border: none;
            background: #edf5ff;
            border-radius: 2px;
          }

          .addSearchParam {
            width: 100%;
            margin-bottom: 8px;
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 20%;
            background-color: #f8f9fc;
            border: 1px solid #f0f0f0;

            &::after {
              content: '';
              position: absolute;
              top: -11px;
              left: -29px;
              bottom: -11px;
              border-left: 1px solid #cfe4fe;
            }

            .content {
              flex: 1;
              overflow-y: auto;
              display: flex;
              padding: 16px;
              justify-content: space-between;
              align-items: end;

              & > div {
                width: 60%;
                height: 100%;
                overflow-y: auto;
              }

              .searchContent {
                display: table;
                max-height: 93%;
                position: relative;
                padding-left: 29px;
              }

              .add-btn {
                padding-left: 10px;
              }
            }
          }
        }
      }
    }
  }

  .params-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: -4px;
      left: -15px;
      bottom: -15px;
      border-left: 1px solid #cfe4fe;
    }

    .params-input {
      margin-right: 8px;
    }
  }

  .add-search-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 40px;
  }

  .l-container {
    background: #fff;
    width: 100%;
    height: 100%;
    overflow: hidden;

    .total {
      padding: 8px;
      font-size: 14px;
    }
  }
}

::v-deep .el-tabs__nav-wrap::after {
  background: transparent !important;
}

.tabs {
  span {
    margin-right: 15px;
    cursor: pointer;
    padding: 8px 15px;
    border-bottom: 2px solid transparent;

    &.tab_active {
      display: inline-block;
      color: #4b6eef;
      border-bottom: 2px solid #4b6eef;
    }
  }
}

.tab-content {
  height:calc(100% - 130px);
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .tab-header {
    position: absolute;
    top: 24px;
    font-size: 14px;
    right: 2%;
    z-index: 2;
    width: 94%;
    display: flex;
    align-items: center;

    .left-btn {
      flex: 1;
    }

    .right-btn {
      span {
        display: inline-block;
        padding: 10px 0;
        cursor: pointer;
        margin-left: 20px;
      }
    }
  }
}
.tablelist {
  .hk-flex.el-col {
    > span:nth-of-type(1) {
      width: 80px;
      text-align: left;
    }
  }
}

.tablelist-title {
  font-weight: 900;
  margin: 10px 0;
}

// ::v-deep .el-table__body-wrapper {
//   height: calc(100% - 50px) !important;
// }

::v-deep .el-button--danger.is-plain:focus {
  background: transparent !important;
  color: #ff4949 !important;
}

::v-deep .description {
  width: 90%;
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep .text-ellipsis {
  width: calc(100% - 140px);
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

::v-deep .hk-flex {
  margin-bottom: 5px;
}
</style>
